<script setup>
import { useTagStore } from '@/stores/tag'
import { storeToRefs } from 'pinia'

const route = useRoute()
const router = useRouter()

const store = useTagStore()
const { tags } = storeToRefs(store)

// 点击标签事件
const handleClick = tag => {
  router.push(tag.path)
}

// 关闭标签事件
const handleClose = (tag, index) => {
  if (route.path === tag.path) {
    router.push(tags.value[index - 1].path)
  }
  store.removeTag(tag)
}
</script>

<template>
  <div class="tags">
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      :type="tag.type"
      :closable="tag.name !== 'home'"
      :effect="route.path === tag.path ? 'dark' : 'plain'"
      @close="handleClose(tag, index)"
      @click="handleClick(tag)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<style scoped lang="less">
.tags {
  display: flex;
  gap: 10px;
  padding: 20px 20px 0 20px;
  background-color: #fbfbfb;
  cursor: pointer;
}
</style>
